<template>
    <div class="product_content" @click="toGoodsDetail(id)">
        <img class="product_img" :src="thumbnailPath">
        <div class="product_info" >
        <span class="product_info_name">{{name}}</span>
        <span class="old_practice">¥ {{oldPractice}}</span>
        <span class="new_practice"><span class="new_icon">¥</span> {{newPractice}}</span>
        </div>
    </div>
</template> 

<script>
import GoodsService from '_common/services/goods.js';
import LoadMore from '_components/loadMore/loadMore';
import Product from '_components/product/product';
export default {
  name: 'product',
  props: {
    oldPractice: {
      type: Number,
      default: 1888,
    },
    newPractice: {
      type: Number,
      default: 1888,
    },
    name: { 
      type: String,
      default: '九合道产品标题',
    },
    id: { 
      type: Number,
    },
    thumbnailPath: {
      type: String,
    }
  },
  methods: {
    toGoodsDetail (goodsId) {
        this.$openRouter({
          name: 'goodsDetail',
            query: {
              goodsId,
            }
			  });
    }
  },
	components: {
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" scoped>
@import	"../../css/common";
    .product_content {
      padding: 1.066667rem 1.066667rem;
      border-bottom: .033333rem solid #eaeaea;
      display: flex;
      background: #ffffff;
      .product_img {
        border: 1px solid#eaeaea;
        width: 160px;
        height: 160px;
        margin-right: .8rem;
      }
      .product_info {
        display: flex;
        flex-direction: column;
        .product_info_name {
          font-size: .933333rem;
          color: @color;
          margin-top: .533333rem;
        }
        .old_practice {
          margin-top: 1.066667rem;
          font-size: .8rem;
          color: @color_gray;
          text-decoration:line-through
        }
        .new_icon {
          font-size: .8rem;
        }
        .new_practice {
          margin-top: .8rem;
          font-size: 1.2rem;
          color: #ff1515;
        }
      }
    }
</style>
